import React, { Component } from 'react'
import View from './../view/view'
import './modal.scss'

class Mask extends Component {
  render () {
    return (
      <div className="tbcModalMask"></div>
    )
  }
}

class Ctn extends Component {
  onClick () {
    this.props.close() 
  }
  render () {
    return (
      <div className="tbcModalCtn">
        <div className="tbcModalCtnHeader">
          <div className="tbcModalCtnHeaderCtn">
            {this.props.headerSlot}
          </div>
          <div className="tbcModalCtnHeaderClose"
          onClick={this.onClick.bind(this)}>x</div>
        </div>
        <div>
          {this.props.contentSlot}
        </div>
      </div>
    )
  }
}

class SlideCtn extends Component {
  render () {
    return (
      <div className="tbcSlideModalCtn"></div>
    )
  }
}

export default class Modal extends Component {
  constructor (props) {
    super(props)
    this.state = {
      type: props.type || 'primary'
    }
    this.props.children.forEach(u => {
      if (u.props.slot === 'header') {
        this.headerSlot = u
      }
      if (u.props.slot === 'content') {
        this.contentSlot = u
      }
    })
  }
  close () {
    this.props.close && this.props.close()
  }
  render () {
    return (
      <View
      show={this.props.show}>
      <div className="tbcModalWrap">
        <Mask></Mask>
        {
          this.state.type === 'slide'
          ? 
          <View
          show={this.props.show}
          name="slide-down"
          >
          <div>
          <SlideCtn></SlideCtn>
          </div>
          </View>  
          :
          <View show={this.props.show}
          name="slide-down">
            <div>
            <Ctn close={this.close.bind(this)}
              headerSlot={this.headerSlot}
              contentSlot={this.contentSlot}>
            </Ctn>
          </div>
          </View>
        }
      </div>
      </View>
    )
  }
}